import { Card, Form, Input, Button, Upload, message, Tabs } from 'antd'
import { UserOutlined, MailOutlined, PhoneOutlined, LockOutlined, UploadOutlined } from '@ant-design/icons'
import { useState } from 'react'

export default function Profile() {
  const [form] = Form.useForm()
  const [passwordForm] = Form.useForm()
  const [loading, setLoading] = useState(false)

  const handleUpdateProfile = async (values: any) => {
    setLoading(true)
    try {
      // TODO: 实现更新个人信息逻辑
      console.log('更新个人信息:', values)
      message.success('个人信息更新成功')
    } catch (error) {
      message.error('更新失败，请重试')
    } finally {
      setLoading(false)
    }
  }

  const handleChangePassword = async (values: any) => {
    setLoading(true)
    try {
      // TODO: 实现修改密码逻辑
      console.log('修改密码:', values)
      message.success('密码修改成功')
      passwordForm.resetFields()
    } catch (error) {
      message.error('密码修改失败，请重试')
    } finally {
      setLoading(false)
    }
  }

  const uploadProps = {
    name: 'avatar',
    action: '/api/upload',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info: any) {
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 头像上传成功`)
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 头像上传失败`)
      }
    },
  }

  return (
    <div>
      <Card title="个人中心" style={{ marginBottom: 16 }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div style={{ display: 'inline-block', position: 'relative', marginBottom: 16 }}>
            <div
              style={{
                width: 120,
                height: 120,
                borderRadius: '50%',
                backgroundColor: '#f0f0f0',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                margin: '0 auto'
              }}
            >
              <UserOutlined style={{ fontSize: 48, color: '#999' }} />
            </div>
            <Upload {...uploadProps} showUploadList={false}>
              <Button
                type="primary"
                shape="circle"
                icon={<UploadOutlined />}
                size="small"
                style={{ position: 'absolute', bottom: 0, right: 0 }}
              />
            </Upload>
          </div>
          <h2>用户名</h2>
          <p style={{ color: '#666' }}>user@example.com</p>
        </div>
      </Card>

      <Card title="个人信息">
        <Tabs 
          defaultActiveKey="profile" 
          items={[
            {
              key: 'profile',
              label: '基本信息',
              children: (
                <Form
                  form={form}
                  layout="vertical"
                  onFinish={handleUpdateProfile}
                  initialValues={{
                    username: 'user',
                    email: 'user@example.com',
                    phone: '13800138000',
                    nickname: '用户'
                  }}
                >
                  <Form.Item
                    name="username"
                    label="用户名"
                    rules={[{ required: true, message: '请输入用户名' }]}
                  >
                    <Input prefix={<UserOutlined />} />
                  </Form.Item>

                  <Form.Item
                    name="email"
                    label="邮箱"
                    rules={[{ type: 'email', message: '请输入有效的邮箱地址' }]}
                  >
                    <Input prefix={<MailOutlined />} />
                  </Form.Item>

                  <Form.Item
                    name="phone"
                    label="手机号"
                    rules={[{ pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' }]}
                  >
                    <Input prefix={<PhoneOutlined />} />
                  </Form.Item>

                  <Form.Item
                    name="nickname"
                    label="昵称"
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item>
                    <Button type="primary" htmlType="submit" loading={loading}>
                      更新信息
                    </Button>
                  </Form.Item>
                </Form>
              )
            },
            {
              key: 'password',
              label: '修改密码',
              children: (
                <Form
                  form={passwordForm}
                  layout="vertical"
                  onFinish={handleChangePassword}
                >
                  <Form.Item
                    name="currentPassword"
                    label="当前密码"
                    rules={[{ required: true, message: '请输入当前密码' }]}
                  >
                    <Input.Password prefix={<LockOutlined />} />
                  </Form.Item>

                  <Form.Item
                    name="newPassword"
                    label="新密码"
                    rules={[{ required: true, message: '请输入新密码' }]}
                  >
                    <Input.Password prefix={<LockOutlined />} />
                  </Form.Item>

                  <Form.Item
                    name="confirmPassword"
                    label="确认新密码"
                    dependencies={['newPassword']}
                    rules={[
                      { required: true, message: '请确认新密码' },
                      ({ getFieldValue }) => ({
                        validator(_, value) {
                          if (!value || getFieldValue('newPassword') === value) {
                            return Promise.resolve()
                          }
                          return Promise.reject(new Error('两次输入的密码不一致'))
                        },
                      }),
                    ]}
                  >
                    <Input.Password prefix={<LockOutlined />} />
                  </Form.Item>

                  <Form.Item>
                    <Button type="primary" htmlType="submit" loading={loading}>
                      修改密码
                    </Button>
                  </Form.Item>
                </Form>
              )
            },
            {
              key: 'settings',
              label: '系统设置',
              children: (
                <>
                  <Card title="通知设置" style={{ marginBottom: 16 }}>
                    <div style={{ color: '#666', lineHeight: 1.6 }}>
                      <p>• 邮件通知：开启</p>
                      <p>• 系统消息：开启</p>
                      <p>• 活动提醒：开启</p>
                    </div>
                  </Card>

                  <Card title="隐私设置" style={{ marginBottom: 16 }}>
                    <div style={{ color: '#666', lineHeight: 1.6 }}>
                      <p>• 个人信息公开：部分公开</p>
                      <p>• 活动参与记录：仅家庭成员可见</p>
                      <p>• 荣誉记录：公开可见</p>
                    </div>
                  </Card>

                  <Card title="账号信息">
                    <div style={{ color: '#666', lineHeight: 1.6 }}>
                      <p>• 注册时间：2024-01-01</p>
                      <p>• 最后登录：2024-01-15</p>
                      <p>• 账号状态：正常</p>
                    </div>
                  </Card>
                </>
              )
            }
          ]}
        />
      </Card>
    </div>
  )
}